﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>通达信脚本网页版(走势图)</title>  
    <link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
    <link rel="stylesheet" href="plugins/code_color/codemirror.css" />
    <link rel="stylesheet" href="content/css/phone7.tools.css" />
</head>  
<body>

    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>
    <div class="tools">
        <div id="tools_top" class="top">
            <span>指标名称：</span>
            <input class="input" v-model="indexName" />
            <select class="changeIndex" v-model="changeIndex">
                <option value="2">副图</option>
                <option value="0">主图</option>
            </select>
            <button class="toolsButton" v-on:click="execute()">执行</button>
            <button class="toolsButton" onclick="Root.table.clear()">清空参数</button>

            <span>股票代码：</span>
            <input class="input" v-model="symbol" />
            <button class="toolsButton" v-on:click="change()">切换股票</button>

            <label v-on:click="changeDebug()">
                <input type="checkbox" v-model="isDebug" />
                <span style="margin-top:-2px;">输出调试信息</span>
            </label>

            <button class="toolsButton" v-on:click="save()">保存</button>
        </div>
        <div class="table" id="tools_table">
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th align="left">参数</th>
                        <th align="left">最小</th>
                        <th align="left">最大</th>
                        <th align="left">缺省</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <td v-on:click="closeEdit(index,'name')">
                            <input v-if="item.name.isEdit" v-model="item.name.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'name')">{{item.name.value}}</span>
                        </td>
                        <td v-on:click="closeEdit(index,'min')">
                            <input v-if="item.min.isEdit" v-model="item.min.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'min')">{{item.min.value}}</span>
                        </td>
                        <td v-on:click="closeEdit(index,'max')">
                            <input v-if="item.max.isEdit" v-model="item.max.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'max')">{{item.max.value}}</span>
                        </td>
                        <td v-on:click="closeEdit(index,'value')">
                            <input v-if="item.value.isEdit" v-model="item.value.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'value')">{{item.value.value}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="code">
            <textarea id="tools_code"></textarea>
        </div>
        <div class="cache" id="tools_cache">
            <ul>
                <li v-bind:class="{ active: index == activeIndex }" v-for="(item, index) in list" v-on:click="select(index)">
                    {{item.name}}
                    <span v-on:click.stop="_delete(index)">删除</span>
                </li>
            </ul>
        </div>
    </div>
    
    <script src="../jscommon/umychart.network.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.complier.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.index.data.js"></script>
    <script src="../jscommon/umychart.resource/js/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/code_color/codemirror.js"></script>
    <script type="text/javascript" src="plugins/code_color/javascript.js"></script>
    <script type="text/javascript" src="content/js/vue.js"></script>
    <script type="text/javascript" src="content/js/phone7.tools.js"></script>
    
    
    <script>
    
        var jsChart;
        JS_EXECUTE_DEBUG_LOG=false;
    
        function getURLParams(name) 
        {
        	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        	var r = window.location.search.substr(1).match(reg);
        	if (r != null) return decodeURI(r[2]);
        	return null;
        }
        
        $(window).resize(resizeCanvas);
        
        function resizeCanvas()
        {
            var height= $(window).height()-300; //300高度给指标编辑器
            var width = $(window).width();
            var divKline=document.getElementById('kline');
            divKline.style.width=width+'px';
            divKline.style.height=height+'px';
            divKline.JSChart.OnSize();
        }
        
        $(function ()
        {
            var symbol=getURLParams('symbol');
            if (symbol==null) symbol='000001.sh';
        
            var aryIndex=new Array();
        
            var index=getURLParams('index');        //指标1
            if (index==null) index='RSI';
            aryIndex.push({"Index":index,"Modify":true,"Change":true});
            //aryIndex.push({"Index":"MACD","Modify":true,"Change":true});
        
        /*
            var index2=getURLParams('index2');      //指标2
            //if (index2==null) index2='指数热度';
            if (index2==null) index2='能图-资金分析';
        */
            let code='VAR1:MA(CLOSE,25),COLORYELLOW;VAR2:MA(CLOSE,40);'
            let code2='MTR:=EXPMEMA(MAX(MAX(HIGH-LOW,ABS(HIGH-REF(CLOSE,1))),ABS(REF(CLOSE,1)-LOW)),N);\n\
        HD :=HIGH-REF(HIGH,1);\n\
        LD :=REF(LOW,1)-LOW;\n\
        DMP:=EXPMEMA(IF(HD>0&&HD>LD,HD,0),N);\n\
        DMM:=EXPMEMA(IF(LD>0&&LD>HD,LD,0),N);\n\
        PDI: DMP*100/MTR;\n\
        MDI: DMM*100/MTR,COLORCYAN;\n\
        ADX: EXPMEMA(ABS(MDI-PDI)/(MDI+PDI)*100,MM),COLORFFB5C5;\n\
        ADXR:EXPMEMA(ADX,MM),COLORYELLOW,LINETHICK2;';
        
            var jsIndexData=new JSIndexScript();
            let testIndex=jsIndexData.Get('RSI');
            console.log(testIndex);
        
            //指标3
            let scriptIndex={Name:testIndex.Name, Script:testIndex.Script, Args:testIndex.Args, "Modify":true,"Change":true};
            //aryIndex.push(scriptIndex);
        
            // 创建股票K线图
            jsChart = JSChart.Init(document.getElementById('kline'));
        
            var option=
            {
                Type:'分钟走势图',
                Windows:  aryIndex,     //窗口指标
                Symbol:symbol,          //股票代码
                IsAutoUpate:true,       //是自动更新数据
        
                IsShowRightMenu:true,   //右键菜单
                IsShowCorssCursorInfo:false,    //是否显示十字光标的刻度信息
                //DayCount:3,
        
                Border: //边框
                    {
                        Left:45,    //左边间距
                        Right:50,     //右边间距
                        Top:20
                    },
                Frame:  //子框架设置
                    [
                        {SplitCount:5,StringFormat:1},
                        {SplitCount:3,StringFormat:1}
                    ]
            }
        
            jsChart.SetOption(option);
            //jsChart.LockIndex('飞龙四式',unlockIndex);
        
            resizeCanvas();
        
           
            Tools.init({
                script: scriptIndex.Script,
                indexName: scriptIndex.Name,
                args: scriptIndex.Args,
                symbol: option.Symbol
            });
        })
        
        function unlockIndex(indexName)
        {
            console.log(indexName);
        }
        
        function ComplierError(error)
        {
            alert(error);
            console.log('[ComplierError]', error);
        }
    </script>  
</body>  
</html>